<template>
    <div class="app_box">
        <div style="height:50px;line-height:50px;text-align:center;background:purple;color:#fff;" @click="isToggle=!isToggle">哈哈</div>
        <div class="date" v-show="isToggle">
            <div class="date_bg" @click="isToggle=false"></div>
            <div class="date_box">
                <div class="date_info">
                    <mt-button type="default" size="small" @click="isToggle=false">取消</mt-button>
                    <mt-switch v-model="isSwitch" @change="onSwitchChange">{{isSwitch?'农历':'公历'}}</mt-switch>
                    <mt-button type="primary" size="small" @click="onBtnOk">确定</mt-button>
                </div>
                <div class="date_picker">
                    <mt-picker :slots="slots" @change="onValuesChange"></mt-picker>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
body {
    background: red;
}
.date_bg {
    background: #000;
    opacity: 0.5;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
}
.date_box {
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
}
.date_info {
    overflow: hidden;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.date_picker {
    border-top: solid 1px #e5e5e5;
}
</style>

<script>
import obj from './date'
const { yearArr, monthArr1, monthArr2, dayArr1, dayArr2 } = obj
export default {
    methods: {
        onSwitchChange() {
            let is = this.isSwitch
            if (this.isSwitch) {
                // 农历
                this.slots[1].values = monthArr2
                this.slots[2].values = dayArr2
            } else {
                // 公历
                this.slots[1].values = monthArr1
                this.slots[2].values = dayArr1
            }
        },
        onValuesChange(picker, values) {
            this.values = values
        },
        onBtnOk() {
            const arr = ['公历', '农历']
            const rtn = `${arr[Number(this.isSwitch)]} ${this.values.join('')}`
            this.rtn = rtn
        }
    },
    data() {
        return {
            rtn: '',
            isToggle: false,
            isSwitch: false,
            values: [],
            slots: [
                {
                    flex: 1,
                    values: yearArr,
                    textAlign: 'center',
                    defaultIndex: 80
                },
                {
                    flex: 1,
                    values: monthArr1,
                    textAlign: 'center',
                    defaultIndex: 6
                },
                {
                    flex: 1,
                    values: dayArr1,
                    textAlign: 'center',
                    defaultIndex: 15
                }
            ]
        }
    }
}
</script>